<!DOCTYPE HTML>
<html>
	<head>
		<!-- autor: Anderson de Souza Zanichelli-->
		<title>DigiBit</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="../www/layout.css" />
		<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js">
		
			document.addEventListener("deviceready", onDeviceReady, false);
		
			function onDeviceReady() {
	    		document.addEventListener("backbutton", onBackKeyDown, false);
			}
		
			function onBackKeyDown() {
 				navigator.app.exitApp();
			}
		
		</script>
		
		<script>	
		function validarValor() {
		
			if(document.getElementById("txtInteiro").value != "") {
				var inteiro = document.getElementById("txtInteiro").value;
				var binary  = new Array();
			
				if (inteiro >= 0 && inteiro < 1024) {
					binary = converterParaBinario(inteiro);
					document.getElementById("bin").value = binary.toString().replace(new RegExp(",","gm"),"");
					if(binary.length > 0) {
						exibirDedos(binary)
					}
				} else {
					alert("Informe apenas um número no intervalo de 0 à 1023");
					limparCampos();
				}
			} else {
				limparCampos();
			}
		}
			
		function converterParaBinario(inteiro) {
			var bin = new Array();

			if (inteiro == 0) {
				for (var n = 0; n < 10; n++) {
					bin.push("0");
				}
				return bin.reverse();
			}
				
			while(inteiro >= 1){
				if(inteiro%2==0){
					bin.push("0");
				} else {
					bin.push("1");
				}
					
				inteiro = Math.floor(inteiro / 2);
			}
				
			for (var j = bin.length; j < 10; j++) {
				bin.push("0");
			}				
				
			return bin.reverse();
		}
			
		function exibirDedos(binario){
			
			for(var i = 0; i < 10; i++) {

				switch(i) {
					case 0:
						if(binario[9] == "0") {
							document.getElementById("mindir").style.visibility="hidden";
						} else {
							document.getElementById("mindir").style.visibility="visible";
						}
						break
						
					case 1:
						if(binario[8] == "0") {
							document.getElementById("anedir").style.visibility="hidden";
						} else {
							document.getElementById("anedir").style.visibility="visible";
						}
						break
							
					case 2:
						if(binario[7] == "0") {
							document.getElementById("meddir").style.visibility="hidden";
						} else {
							document.getElementById("meddir").style.visibility="visible";
						}
						break
							
					case 3:
						if(binario[6] == "0") {
							document.getElementById("inddir").style.visibility="hidden";
						} else {
							document.getElementById("inddir").style.visibility="visible";
						}
						break
						
					case 4:
						if(binario[5] == "0") {
							document.getElementById("poldir").style.visibility="hidden";
						} else {
							document.getElementById("poldir").style.visibility="visible";
						}
						break
							
					case 5:
						if(binario[4] == "0") {
							document.getElementById("polesq").style.visibility="hidden";
						} else {
							document.getElementById("polesq").style.visibility="visible";
						}
						break
							
					case 6:
						if(binario[3] == "0") {
							document.getElementById("indesq").style.visibility="hidden";
						} else {
							document.getElementById("indesq").style.visibility="visible";
						}
						break
							
					case 7:
						if(binario[2] == "0") {
							document.getElementById("medesq").style.visibility="hidden";
						} else {
							document.getElementById("medesq").style.visibility="visible";
						}
						break
						
					case 8:
						if(binario[1] == "0") {
							document.getElementById("aneesq").style.visibility="hidden";
						} else {
							document.getElementById("aneesq").style.visibility="visible";
						}
						break
							
					case 9:
						if(binario[0] == "0") {
							document.getElementById("minesq").style.visibility="hidden";
						} else {
							document.getElementById("minesq").style.visibility="visible";
						}
						break
				}
			}			
		}
		
		function limparCampos() {
			exibirDedos(["0","0","0","0","0","0","0","0","0","0"]);
			document.getElementById("bin").value = "0000000000";
		}
		
		function exit() {
			window.MyCls.finish();
			return false;
		}
	</script>
	</head>
	<body>
	
		<div id="header" align="center">
			<label id="descricao" style="color: #aaa; font-weight: bold; font-size: 18px">DigiBit - Conversor de decimal para binário.</label>
		</div>
		
		<div id="hands" align="center">
			<div id="le"  style="float:left;">
				<img id="minesq" height="32" width="16" src="../www/mindinhoesq.png"/>
				<img id="aneesq" height="36" width="14" src="../www/anelaresq.png" />
				<img id="medesq" height="38" width="14" src="../www/medioesq.png" />
				<img id="indesq" height="36" width="14" src="../www/indicadoresq.png" />
				<img id="polesq" height="36" width="20" src="../www/polegaresq.png" />
				<img id="handl" height="64" width="64" src="../www/lefthand.png" />
			</div>
			<div id="ri"  style="float:right;">
				<img id="mindir" height="32" width="16" src="../www/mindinhodir.png" />
				<img id="anedir" height="36" width="14" src="../www/anelardir.png" />
				<img id="meddir" height="38" width="14" src="../www/mediodir.png" />
				<img id="inddir" height="36" width="14" src="../www/indicadordir.png" />
				<img id="poldir" height="36" width="20" src="../www/polegardir.png" />
				<img id="handr" height="64" width="64" src="../www/righthand.png" />
			</div>
		</div>
		
		<div id="txt" align="center">
			Decimal:	
			<input id="txtInteiro" type="number" size="6" maxlength="4" style="font-size: 28px" onKeyUp="validarValor()" />
		</div>
		
		<div id="divbin" align="center">
			Binário:
			<input id="bin" type="text" size="10" style="font-size: 28px" disabled="disabled" />
		</div>
		
		<div id="quit">
			<img src="../www/quit.png" onclick="exit()"/>
		</div>
		
	</body>
</html>
